<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/client/header::header-head}">
</head>
<body>
<div th:replace="~{/client/header::header-body}"></div>

<div class="container mt-3">
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">昵称</th>
            <th scope="col">邮箱</th>
            <th scope="col">链接</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="friends:${f}">
            <td th:text="${friends.getFriendsname()}">Mark</td>
            <td th:text="${friends.getEmail()}">Otto</td>
            <td >  <a   class="btn btn-light"  th:href="@{${friends.getLink()}}" role="button">跳转</a></td>
        </tr>
        </tbody>
    </table>
</div>

<div class="container mt-3">
    <form class="row g-3" th:action="'/client/friend/add'" method="post">
        <div class="col-md-6">
            <label for="inputEmail4" class="form-label">昵称</label>
            <input type="text" class="form-control" id="inputEmail4" name="friendsname" required>
        </div>
        <div class="col-md-6">
            <label for="inputPassword4" class="form-label" >邮箱</label>
            <input type="text" class="form-control" id="inputPassword4" name="email" required>
        </div>
        <div class="col-12">
            <label for="inputAddress" class="form-label">链接</label>
            <input type="text" class="form-control" id="inputAddress" name="link" required>
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </form>
</div>

<div th:replace="~{/client/end::header-end}"  ></div>
</body>
</html>